<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZLNLP|角色配置权限</title>
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
<link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet" />

<!-- Toastr style -->
<link th:href="@{/css/plugins/toastr/toastr.min.css}" rel="stylesheet"/>

<link th:href="@{/css/style.css}" rel="stylesheet" />


</head>

<body>

    <div id="wrapper">
		<nav class="navbar-default navbar-static-side" role="navigation" th:include="nav :: navigation"></nav>
		<div id="page-wrapper" class="gray-bg">
        	<div class="border-bottom" th:include="header :: headerTop"></div>
        	<div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>配置权限</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <!--<form id="roleForm" action="roleEdit" method="POST" class="form-horizontal" enctype="multipart/form-data">-->
                            <form id="roleForm" method="POST" class="form-horizontal" enctype="multipart/form-data">
                            	<input type="hidden" id="id" name="id" th:value="${role.id}" />

                                <div class="form-group"><label class="col-sm-2 control-label">名称：</label>
                                    <div class="col-sm-10">
                                    	<input id="name" name="name" type="text" class="form-control" th:value="${role.name}" disabled/>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group"><label class="col-sm-2 control-label">权限：</label>
                                    <div class="col-sm-10">
                                        <div class="col-sm-2">
                                            <h2>输入</h2>
                                            <hr>
                                            <div class="form-group row">
                                                <div class="col-sm-6">
                                                    <button type="button" class="btn btn-success" id="btn-check-all">全部选中</button>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col-sm-6">
                                                    <button type="button" class="btn btn-danger" id="btn-uncheck-all">全部取消</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <h2>树</h2>
                                            <hr>
                                            <div id="treeview-checkable" class=""></div>
                                        </div>
                                        <div class="col-sm-2">
                                            <h2>事件</h2>
                                            <hr>
                                            <div id="checkable-output"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>

                                <div class="form-group">
                                    <div class="col-sm-4 col-sm-offset-2">
                                        <button id="submitButton" onclick="saveRoleAuthoritys()" class="btn btn-primary" type="button">&nbsp;&nbsp;&nbsp;&nbsp;保&nbsp;&nbsp;&nbsp;&nbsp;存&nbsp;&nbsp;&nbsp;&nbsp;</button>
                                    </div>
                                </div>
                            </form>

                            <form id="roleAuthorityForm" action="savaRoleAuthoritys" method="POST" class="form-horizontal" enctype="multipart/form-data">
                                <input type="hidden" id="roleId" name="roleId"  />
                                <input type="hidden" id="authorityIds" name="authorityIds"  />
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
            </div>
        	<div class="footer" th:include="footer :: copyright"></div>
      	</div>
	</div>
	
    <!-- Mainly scripts -->
    <script th:src="@{/js/jquery-2.1.1.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/plugins/jsTree/bootstrap-treeview.min.js}"></script>
    <script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
    <script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
	
    <!-- Peity -->
    <script th:src="@{/js/plugins/peity/jquery.peity.min.js}"></script>
	
    <!-- Custom and plugin javascript -->
    <script th:src="@{/js/inspinia.js}"></script>
    <script th:src="@{/js/plugins/pace/pace.min.js}"></script>
    
    <!-- Toastr script -->
    <script th:src="@{/js/plugins/toastr/toastr.min.js}"></script>
    
    <!-- common -->
    <script th:src="@{/js/common.js}"></script>
    
    
    <script th:inline="javascript">
		$(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "getAuthorityTree?id="+$("#id").val(),
                contentType: "application/json; charset=utf-8",
                success: function(data){
                    if(data.resObject!=null){
                        var $checkableTree = $('#treeview-checkable').treeview({
                            data: data.resObject.tree,
                            showIcon: false,
                            showCheckbox: true,
                            onNodeChecked: function(event, node) {
                                $('#checkable-output').prepend('<p>' + node.text + ' was checked</p>');
                                if(node.id!=0){
                                    $checkableTree.treeview('checkNode', [ $checkableTree.treeview('search', [ getParentAuthorityById(node.id), { ignoreCase: true, exactMatch: true } ]), { silent: true }]);
                                }
                            },
                            onNodeUnchecked: function (event, node) {
                                $('#checkable-output').prepend('<p>' + node.text + ' was unchecked</p>');
                            }
                        });

                        // Check/uncheck all
                        $('#btn-check-all').on('click', function (e) {
                            $checkableTree.treeview('checkAll', { silent: true });
                        });

                        $('#btn-uncheck-all').on('click', function (e) {
                            $checkableTree.treeview('uncheckAll', { silent: true });
                        });

                        var authoritys=data.resObject.authoritys;
                        for(var obj in authoritys){
                            $checkableTree.treeview('checkNode', [ $checkableTree.treeview('search', [ authoritys[obj].name, { ignoreCase: true, exactMatch: true } ]), { silent: true }]);
                        }
                    }
                },
                error: function(){
                    alert("系统异常！");
                }
            });
            /*var defaultData = [
                {
                    id: 1,
                    text: 'Parent 1',
                    href: '#parent1',
                    tags: ['4'],
                    nodes: [
                        {
                            text: 'Child 1',
                            href: '#child1',
                            tags: ['2'],
                            nodes: [
                                {
                                    text: 'Grandchild 1',
                                    href: '#grandchild1',
                                    tags: ['0']
                                },
                                {
                                    text: 'Grandchild 2',
                                    href: '#grandchild2',
                                    tags: ['0']
                                }
                            ]
                        },
                        {
                            text: 'Child 2',
                            href: '#child2',
                            tags: ['0']
                        }
                    ]
                },
                {
                    text: 'Parent 2',
                    href: '#parent2',
                    tags: ['0']
                },
                {
                    text: 'Parent 3',
                    href: '#parent3',
                    tags: ['0']
                },
                {
                    text: 'Parent 4',
                    href: '#parent4',
                    tags: ['0']
                },
                {
                    text: 'Parent 5',
                    href: '#parent5'  ,
                    tags: ['0']
                }
            ];*/

            /*var findCheckableNodess = function() {
                return $checkableTree.treeview('search', [ $('#input-check-node').val(), { ignoreCase: false, exactMatch: false } ]);
            };
            var checkableNodes = findCheckableNodess();

            // Check/uncheck/toggle nodes
            $('#input-check-node').on('keyup', function (e) {
                checkableNodes = findCheckableNodess();
                $('.check-node').prop('disabled', !(checkableNodes.length >= 1));
            });

            $('#btn-check-node.check-node').on('click', function (e) {
                $checkableTree.treeview('checkNode', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
            });

            $('#btn-uncheck-node.check-node').on('click', function (e) {
                $checkableTree.treeview('uncheckNode', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
            });

            $('#btn-toggle-checked.check-node').on('click', function (e) {
                $checkableTree.treeview('toggleNodeChecked', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
            });*/

            // Check/uncheck all
            /*$('#btn-check-all').on('click', function (e) {
                $checkableTree.treeview('checkAll', { silent: $('#chk-check-silent').is(':checked') });
            });

            $('#btn-uncheck-all').on('click', function (e) {
                $checkableTree.treeview('uncheckAll', { silent: $('#chk-check-silent').is(':checked') });
            });*/
		});
        function getParentAuthorityById(id) {
            var parentName="";
            $.ajax({
                type: "POST",
                url: "getParentAuthorityById?id=" + id,
                contentType: "application/json; charset=utf-8",
                async:false,
                success: function (data) {
                    if(data.resObject!=null){
                        parentName=data.resObject.name;
                    }
                },
                error: function () {
                    alert("系统异常！");
                }
            });
            return parentName;
        }

    function saveRoleAuthoritys(){
        var nodes=$('#treeview-checkable').treeview('getChecked');
        var authorityIds="";
        $.each(nodes, function(index, node){
            authorityIds += node.id + ",";
        });
        if(authorityIds!=""){
            $("#roleId").val($("#id").val());
            $("#authorityIds").val(authorityIds);
            $("#roleAuthorityForm").submit();
        }else{
            alert("未勾选任何权限！");
        }
    }

    </script>

</body>

</html>
